<script setup>
import ImageUpload from '@/components/ImageUpload.vue'
import { reactive, ref, watch } from 'vue'
import { addNewCategory, querySecondaryCategoryList, queryTopCategories, updateCategory } from '@/service/category.js'
import { ElMessage } from 'element-plus'
const showModal = ref(false)
const categoryForm = reactive({
  categoryId: null,
  categoryLevel: 1,
  categoryName: '',
  parentId: null,
  categoryImage: '',
  categoryWeight: 10,
  categoryStatus: 1,
})
const categoryList = ref([])
watch(
  () => categoryForm.categoryLevel,
  async (value) => {
    if (value === 2) {
      const res = await queryTopCategories()
      categoryList.value = res.data
    } else if (value === 3) {
      const res = await querySecondaryCategoryList()
      categoryList.value = res.data
    }
  }
)
watch(showModal, (value) => {
  if (!value) {
    Object.assign(categoryForm, {
      categoryId: null,
      categoryLevel: 1,
      categoryName: '',
      parentId: null,
      categoryImage: '',
      categoryWeight: 10,
      categoryStatus: 1,
    })
  }
})
const emits = defineEmits(['update'])
function valid() {
  if (categoryForm.categoryLevel === 2 || categoryForm.categoryLevel === 3) {
    if (categoryForm.parentId === null) {
      ElMessage.error('请选择父级分类！')
      return false
    }
  }
  if (!categoryForm.categoryName) {
    ElMessage.error('请输入分类名称！')
    return false
  }
  if (categoryForm.categoryLevel === 3 && !categoryForm.categoryImage) {
    ElMessage.error('请上传分类图片！')
    return false
  }
  return true
}

const rules = reactive({
  categoryLevel: [{ required: true, message: '请选择分类级别', trigger: 'blur' }],
  parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
  categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  categoryStatus: [{ required: true, message: '请选择分类状态', trigger: 'blur' }],
  categoryWeight: [{ required: true, message: '请选择分类权重', trigger: 'blur' }],
})

async function onTapUpdateButton() {
  if (!valid()) return

  const params = {}
  params.id = categoryForm.categoryId
  params.name = categoryForm.categoryName
  params.sort = categoryForm.categoryWeight
  params.icon = categoryForm.categoryImage
  params.status = categoryForm.categoryStatus
  await updateCategory(params)
  emits('update')
  showModal.value = false
}

defineExpose({
  showModal,
  categoryForm,
})
</script>

<template>
  <el-dialog v-model="showModal" draggable title="编辑分类" width="800">
    <el-form ref="formRef" :model="categoryForm" :rules="rules" label-position="right" label-width="100px">
      <el-form-item prop="categoryLevel">
        <template #label>
          <el-tooltip
            :enter-delay="500"
            content="一级分类为顶级分类，无上级；二级/三级分类需选择对应上级分类"
            effect="dark"
            placement="right"
          >
            <span>分类级别:</span>
          </el-tooltip>
        </template>
        <el-select
          v-model="categoryForm.categoryLevel"
          disabled
          placeholder="分类级别"
          style="width: 300px"
          @change="categoryForm.parentId = null"
        >
          <el-option :key="1" :value="1" label="一级分类" />
          <el-option :key="2" :value="2" label="二级分类" />
          <el-option :key="3" :value="3" label="三级分类" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-tooltip
            :enter-delay="500"
            content="一级分类无需选择上级；二级分类选择一级分类为父级；三级分类选择二级分类为父级"
            effect="dark"
            placement="right"
          >
            <span>上级分类:</span>
          </el-tooltip>
        </template>
        <el-select
          v-if="categoryForm.categoryLevel === 1"
          v-model="categoryForm.parentId"
          disabled
          placeholder="顶级分类"
          style="width: 300px"
        >
        </el-select>
        <el-select
          v-else
          v-model="categoryForm.parentId"
          clearable
          disabled
          filterable
          placeholder="请选择父级分类"
          style="width: 300px"
        >
          <el-option v-for="category in categoryList" :key="category.id" :label="category.name" :value="category.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="categoryName">
        <template #label>
          <el-tooltip
            :enter-delay="500"
            content="请输入1-8个字符，支持中文、字母、数字和下划线"
            effect="dark"
            placement="right"
          >
            <span>分类名称:</span>
          </el-tooltip>
        </template>
        <el-input
          v-model="categoryForm.categoryName"
          maxlength="15"
          placeholder="请输入分类名称"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类图片:">
        <template #label>
          <el-tooltip
            :enter-delay="500"
            content="请输入分类图片，仅三级分类的图片是必须上传的"
            effect="dark"
            placement="right"
          >
            <span>分类图片:</span>
          </el-tooltip>
        </template>
        <ImageUpload v-model="categoryForm.categoryImage"></ImageUpload>
      </el-form-item>

      <el-form-item label="分类权重:" prop="categoryWeight">
        <template #label>
          <el-tooltip :enter-delay="500" content="权重越高的分类，越容易被看到" effect="dark" placement="right">
            <span>分类权重:</span>
          </el-tooltip>
        </template>
        <el-input-number
          v-model="categoryForm.categoryWeight"
          :controls="false"
          :max="999999"
          :min="1"
          :precision="0"
          placeholder="请输入分类权重"
          value-on-clear="min"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="分类状态:" prop="categoryStatus">
        <template #label>
          <el-tooltip
            :enter-delay="500"
            content="请选择是否隐藏该分类，若隐藏上层分类，则下层分类也将被隐藏"
            effect="dark"
            placement="right"
          >
            <span>分类状态:</span>
          </el-tooltip>
        </template>
        <el-radio-group v-model="categoryForm.categoryStatus">
          <el-radio :value="1">显示</el-radio>
          <el-radio :value="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="onTapUpdateButton">更新</el-button>
      <el-button type="default" @click="showModal = false"> 取消 </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
